import Vue,{PropOptions,VNode} from 'vue';
import Icon from '../icon';
import {event} from 'quasar';
import {MySet} from '../../../util/polyfill';
const {stopAndPrevent}=event;
/**
 * 切换顺序, 'tf', 'ft', t表示true, f表示false
 */
export type ToggleOrder='tf'|'ft';
/**
 * 复选框
 * @author 唐国雄
 * @date 2021/6/16
 * 属性----------------------
 * v-model					当前值, any
 * :label					标签, string
 * :color					颜色, string
 * :val						当v-model为MySet时, 当前代表的值, any
 * :true-value				当v-model不为MySet时, 勾选的值, any
 * :false-value				当v-model不为MySet时, 未勾选的值, any
 * :indeterminate-value		半勾选的值, any
 * :toggle-indeterminate	用户点击是否能半勾选, boolean
 * :toggle-order			切换顺序, ToggleOrder
 * :disable					禁用, boolean
 * 事件----------------------
 * @input
 * 插槽----------------------
 * #default		标签(比:label优先)
 */
export default Vue.extend({
	name:'Checkbox',
	props:{
		//当前值
		value:{
			required:true,
		} as PropOptions<unknown|MySet<unknown>>,
		//标签
		label:String,
		//颜色
		color:String,
		//当v-model为MySet时, 当前代表的值
		val:{},
		//当v-model不为MySet时, 勾选的值
		trueValue:{
			default:true
		},
		//当v-model不为MySet时, 未勾选的值
		falseValue:{
			default:false
		},
		//半勾选的值
		indeterminateValue:{
			default:null
		},
		//用户点击是否能半勾选
		toggleIndeterminate:Boolean,
		//切换顺序
		toggleOrder:{
			type:String,
			default:'tf',
			validator(v){
				return [
					'tf',
					'ft',
				].indexOf(v)!==-1;
			}
		} as PropOptions<ToggleOrder>,
		//禁用
		disable:Boolean,
	},
	computed:{
		classes():string{
			return 'lexmis-Checkbox'+
				(this.checkStatus?' lexmis--true':this.checkStatus===null?' lexmis--undefined':' lexmis--false')+
				(this.disable?' lexmis--disable':' lexmis--hoverable');
		},
		//MySet模式
		modelIsArray():boolean{
			return this.val!==undefined&&this.value instanceof MySet;
		},
		//勾选状态
		checkStatus():boolean|null{
			const {value}=this;
			if(this.modelIsArray){
				return (value as MySet<unknown>).has(this.val);
			}
			if(this.trueValue===value){
				return true;
			}else if(this.falseValue===value){
				return false;
			}
			return null;
		},
	},
	methods:{
		$_lexmis_onClick(e:Event,blur:boolean=true){
			stopAndPrevent(e);
			if(this.disable) return;
			this.$emit('input',this.$_lexmis_nextValue());
			if(blur){
				(this.$el as HTMLElement).blur();
			}
		},
		//下次切换的值
		$_lexmis_nextValue(){
			const {
				checkStatus,
				value,
				toggleIndeterminate,
				trueValue,
				falseValue,
				toggleOrder,
			}=this;
			if(this.modelIsArray){
				if(checkStatus){
					(value as MySet<unknown>).delete(this.val);
				}else{
					(value as MySet<unknown>).add(this.val);
				}
				return value;
			}else{
				if(checkStatus){
					if(toggleOrder!=='ft'||!toggleIndeterminate){
						return falseValue;
					}
				}else if(checkStatus===false){
					if(toggleOrder==='ft'||!toggleIndeterminate){
						return trueValue;
					}
				}else{
					return toggleOrder!=='ft'
						?trueValue
						:falseValue;
				}
			}
			return this.indeterminateValue;
		}
	},
	render(h):VNode{
		const {default:slot}=this.$scopedSlots;
		const labelContent=slot?slot(undefined):this.label;
		return h('div',{
			staticClass:this.classes,
			staticStyle:{
				color:this.color
			},
			attrs:{
				tabindex:this.disable?-1:0,
			},
			on:{
				click:this.$_lexmis_onClick,
				keydown:(e:KeyboardEvent) => {
					if(e.key===' '||e.key==='Enter'){
						this.$_lexmis_onClick(e,false);
					}
				}
			}
		},[
			h('div',{
				staticClass:'lexmis_box'
			},[
				this.$baseui_theme==='fk'
					?h(Icon,{
						props:{
							name:this.checkStatus?'check':'remove'
						}
					})
					:h('svg',{
						staticClass:'lexmis-Icon',
						attrs:{focusable:'false',viewBox:'0 0 24 24','aria-hidden':'true'}
					},[
						h('path',{
							staticClass:'lexmis_true',
							attrs:{
								fill:'none',
								d:'M1.73,12.91 8.1,19.28 22.79,4.59'
							}
						}),
						h('path',{
							staticClass:'lexmis_undefined',
							attrs:{
								d:'M4,14H20V10H4'
							}
						})
					])
			]),
			labelContent
				?h('div',{
					staticClass:'lexmis_label'
				},labelContent)
				:null,
		]);
	}
});
